<template>
  <div class="construction">
    <!-- <el-icon color="#409EFC" class="fanhui" @click="setStyle">
      <i-ep-ArrowLeftBold />
    </el-icon> -->
    <con-left :detail="massifStore.massifList[onPage]" />
    <vtour @open-vr-click="show" @open-detail="getDetail" @getpage="getpage" />
    <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>


    <weather ref="weatherRef" v-if="typeValue == 1" @close="closeClick"/>
    <soil ref="soilRef" v-if="typeValue == 2" @close="closeClick"/>
    <water ref="waterRef" v-if="typeValue == 3" @close="closeClick"/>
    <pests ref="pestsRef" v-if="typeValue == 4" @close="closeClick"/>
    <seedling ref="seedlingRef" v-if="typeValue == 5" @close="closeClick"/>
    <spore ref="sporeRef" v-if="typeValue == 6" @close="closeClick"/>
    <uav ref="uavRef" v-if="typeValue == 7" @close="closeClick"/>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { useMassifStore } from "@/store/modules/massif";
const massifStore = useMassifStore();
import { nextTick } from "vue";
const router = useRouter();
const route = useRoute();

import vtour from "@/components/vtour/Vtour.vue";

const ConLeft = defineAsyncComponent(() => import("./components/conLeft.vue"));

import pests from "./deviceDialog/pests.vue";
import water from "./deviceDialog/water.vue";
import soil from "./deviceDialog/soil.vue";
import seedling from "./deviceDialog/seedling.vue";
import spore from "./deviceDialog/spore.vue";
import weather from "./deviceDialog/weather.vue";
import uav from "./deviceDialog/uav.vue";
const pestsRef = ref();
const waterRef = ref();
const soilRef = ref();
const weatherRef = ref();
const seedlingRef = ref();
const sporeRef = ref();
const uavRef = ref();

const typeValue = ref();
// import { detail } from "@/network/login";
function show(n: Number) {}
function gotoScene() {
  window.krpano.call(
    "loadscene(" + route.query.scene + ",null,MERGE,BLEND(1));"
  );
}
onMounted(() => {
  nextTick(() => {
    gotoScene();
  });
});
const getDetail = async(name: string, num: string, type: number)=> {
  typeValue.value = type;
  if (type === 1) {
    /*气象*/
    await nextTick();
    weatherRef.value.initData(name, num);

  } else if (type === 2) {
    /*土壤*/
    await nextTick();
    soilRef.value.initData(name, num);
  } else if (type === 3) {
    /*水肥*/
    await nextTick();
    waterRef.value.initData(name, num);
  } else if (type === 4) {
    /*虫情*/
    await nextTick();
    pestsRef.value.initData(name, num);
  } else if (type === 5) {
    /*苗情*/
    await nextTick();
    seedlingRef.value.initData(name, num);
  } else if (type === 6) {
    /*孢子*/
    await nextTick();
    sporeRef.value.initData(name, num);
  } else if (type === 7) {
    /*无人机*/
    await nextTick();
    uavRef.value.initData(name, num);
  }
}
function closeClick() {
  typeValue.value = ''
}
function go() {
  router.replace("/digit/detail");
}
let onPage = ref(0);
function getpage(n: Number) {
  onPage.value = Number(n);
}
</script>

<style lang="scss" scoped>
.construction {
  position: relative;
  width: 100%;
  height: 100%;

  .fanhui {
    position: absolute;
    top: -30px;
    left: 18px;
    z-index: 11;
    width: 30px;
    height: 30px;
    font-size: 30px;
    cursor: pointer;
  }

  .top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 120px;
    background: linear-gradient(
      to bottom,
      rgb(0 25 46 / 100%),
      rgb(0 25 46 / 80%),
      rgb(0 25 46 / 0%)
    );
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgb(0 25 46 / 80%), rgb(0 25 46 / 0%));
  }

  .bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, rgb(0 25 46 / 80%), rgb(0 25 46 / 0%));
  }
}
</style>
